import React, { Component } from 'react';
import * as echarts from 'echarts';
import Pts from 'prop-types'
class Pie extends Component {
    // 对props中的参数进行类型的校验
    static propTypes = {
        id: Pts.string.isRequired,
        text: Pts.string.isRequired,
        data: Pts.array.isRequired,
        title: Pts.string.isRequired
    }

    // 给props 设置默认的一些参数
    static defaultProps = {
        w: '33.3%',
        h: '500px'
    }
    render() {

        // console.log('饼图数据', this.props.data);
        var chartDom = document.getElementById(this.props.id);
        // console.log('dom容器', chartDom);
        // 判断可以获取到dom 时,创建echarts 图表
        if (chartDom) {
            // 第二次执行的render的时候
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: this.props.text,
                    subtext: '2022年统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'

                },
                // legend: {
                //     orient: 'vertical',
                //     left: 'left'
                // },
                series: [
                    {
                        name: this.props.title,
                        type: 'pie',
                        radius: '60%',
                        data: this.props.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 判断是否当前饼图有图例
            if (this.props.legend) {
                option['legend'] = {
                    orient: 'vertical',
                    left: 'left'
                }
            }
            option && myChart.setOption(option);
        }
        return (
            <div id={this.props.id} style={{ width: this.props.w, height: this.props.h }}></div>

        );
    };
    componentDidMount() {


    }
}

export default Pie;
